<!--
 * @Description: 成交榜单
 * @Author: py
 * @Date: 2024-11-04
-->
<script setup lang='ts'>
import { useDealBoard } from '@fl/api/data-analysis'
import { useRouter } from 'vue-router'

import type { DateRange } from '../types'

const router = useRouter()

const oDateRange = inject<Ref<DateRange>>('dateRange', ref({ endTime: '', startTime: '' }))
if (!oDateRange) {
    throw new Error('dateRange is not provided by an ancestor component.')
}

const activeTabName = ref('enterprise')
const oParams = computed(() => {
    return {
        endTime: oDateRange.value.endTime,
        order: 1, // 1 正序 2 倒序
        selectType: activeTabName.value === 'enterprise' ? 1 : 2,
        sortType: 1, // 1网签套数 2成交金额 3网签面积
        startTime: oDateRange.value.startTime,
    }
})
const { data: tableData, isLoading } = useDealBoard(oParams)
const isTableLoading = ref(isLoading)

function toProjectCouponDetails(sName: string) {
    router.push(`/data-analysis/housing-act-detail?startDate=${oDateRange.value.startTime}&endDate=${oDateRange.value.endTime}&projectName=${sName}&type=writeOff`)
}
</script>

<template>
    <div>
        <div class="row-title">
            <div class="module-title">
                成交榜单TOP10
            </div>

            <div class="tabs-wrapper">
                <el-tabs v-model="activeTabName">
                    <el-tab-pane label="企业"
                                 name="enterprise"
                    />

                    <el-tab-pane label="项目"
                                 name="project"
                    />
                </el-tabs>
            </div>
        </div>

        <el-table v-loading="isTableLoading"
                  :data="tableData"
                  class="w-full"
                  stripe
                  max-height="460"
        >
            <el-table-column type="index"
                             label="排名"
                             width="55"
            />

            <el-table-column :label="activeTabName === 'enterprise' ? '企业名称' : '项目名称'"
                             show-overflow-tooltip
                             width="115"
            >
                <template #default="{ row }">
                    <span v-if="activeTabName === 'enterprise'">{{ row.enterpriseName }}</span>

                    <span v-else
                          class="text-#da0004 cursor-pointer"
                          @click="toProjectCouponDetails(row.enterpriseName)"
                    >{{ row.enterpriseName }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="totalHouses"
                             label="网签套数"
            />

            <el-table-column label="成交金额(万元)">
                <template #default="{ row }">
                    {{ row.turnoverMoney }}
                </template>
            </el-table-column>

            <el-table-column prop="onlineSignArea"
                             label="网签面积(万m²)"
            />
        </el-table>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.row-title {
    display: flex;
    justify-content: space-between;
}

.tabs-wrapper {
    width: 90px;

    :deep(.el-tabs__header) {
        margin: 0;
    }

    :deep(.el-tabs__nav-wrap) {
        &::after {
            display: none;
        }
    }

    :deep(.el-tabs__item) {
        height: 26px;
        padding: 0 12px;
        align-items: unset;
    }
}
</style>
